<template>
	<div>
		<el-form size="mini" :model="buryForm" disabled label-position="right" ref="buryForm">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="埋点名称">
						<el-input v-model="buryForm.trackName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="埋点类型">
						<el-input v-model="buryForm.eventName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="动作效果">
						<el-input v-model="buryForm.actionEffectName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="动作类型">
						<el-input v-model="buryForm.actionTypeName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="埋点时机">
						<el-input type="textarea" v-model="buryForm.extMessage.trackOpportunity"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div>
			<p>已选属性</p>
			<el-table size="mini" :data="fieldAttributes" border>
				<el-table-column
					v-for="item in columns"
					:prop="item.prop"
					:label="item.label"
					:show-overflow-tooltip="true"
					:sortable="item.sortable"
					:min-width="item.width"
					:key="item.prop">
					<template slot-scope="scope">
						{{scope.row[item.prop] || "--"}}
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		name: "buryDetailDialog",
		data() {
			return {
				buryForm: {
					extMessage: {}
				},
				columns: [
					{
						prop: "categoryValue",
						label: "类别",
						width: 80
					},
					{
						prop: "propertyId",
						label: "属性名",
						width: 100
					},
					{
						prop: "propertyName",
						label: "显示名",
						width: 100
					},
					{
						prop: "propertyTypeValue",
						label: "属性类型",
						width: 80
					},
					{
						prop: "dataTypeValue",
						label: "数据类型",
						width: 80
					},
					{
						prop: "verifyRule",
						label: "验证规则",
						width: 120
					},
					{
						prop: "remark",
						label: "说明",
						width: 120
					},
					{
						prop: "explain",
						label: "注释",
						width: 120,
						tooltip: true,
					},
				],
				fieldAttributes: [],
				categoryList: [],
				propertyTypeList: [],
				dataTypeList: []
			}
		},
		mounted() {
		},
		props: ["trackDbId"],
		watch: {
			trackDbId: {
				handler(val) {
					if (val) {
						console.log(val);
						this.handleQueryPropertyPropertyList();
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 接口：查询数据
			async handleQueryEvent() {
				let res = await this.$eventApi.eventQuery({
					id: this.trackDbId
				});
				if (res) {
					this.buryForm = res.value;
					let {extMessage, fieldAttributes} = res.value;
					if (!extMessage) {
						this.buryForm.extMessage = {};
					}
					this.fieldAttributes = this.handleFormatProperTiesList(fieldAttributes);
				}
			},
			// 查询事件属性类型列表
			async handleQueryPropertyPropertyList() {
				let arr = ["category", "propertyType", "dataType"];
				const promise = arr.map(i => {
					return this.$applicationApi.property_property({
						type: i
					});
				});
				const res = await Promise.all(promise);
				if (res) {
					this.categoryList = res[0].value.list;
					this.propertyTypeList = res[1].value.list;
					this.dataTypeList = res[2].value.list;
					if (this.trackDbId) {
						this.handleQueryEvent();
					}
				}
			},
			handleFormatProperTiesList(list) {
				list.forEach((item, index) => {
					this.categoryList.forEach(category => {
						if (category.code === item.category) {
							list[index].categoryValue = category.value;
						}
					});
					this.dataTypeList.forEach(dataType => {
						if (dataType.code === item.dataType) {
							list[index].dataTypeValue = dataType.value;
						}
					});
					this.propertyTypeList.forEach(propertyType => {
						if (propertyType.code === item.propertyType) {
							list[index].propertyTypeValue = propertyType.value;
						}
					});
				});
				return list;
			},
		}
	}
</script>

<style scoped>

</style>
